$('#traffic-monitor').click(function(event) {
	/* Act on the event */
	$('#tarffic-rta-box').remove();
	$('#section0').append($('<div class="box panel-blur" id="tarffic-rta-box">' +
	   '<div class="box-header">' +
	       '<h3 class="box-title">实时数据分析</h3>' +
	       '<div class="box-tools pull-right">' +
	           '<button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>' +
	           '</button>' +
	           '<button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>' +
	           '</button>' +
	       '</div>' +
	   '</div>' +
	   '<!-- /.box-header -->' +
	   '<div class="box-body">' +

	        '<div id ="traffic-charts-area" class="row">' +
	            '<div class="row">' +
	            	'<div class="col-lg-6">' +
	                    '<button type="button" class="btn btn-default pull-right" id="traffic-date-picker">' +
	                        '<span>' +
	                            '<i class="fa fa-calendar"></i> Date range picker' +
	                        '</span>' +
	                            '<i class="fa fa-caret-down"></i>' +
	                    '</button>' +
	                '</div>' +

	            '</div>' +
	        '</div>' +
	    '</div>' +
	'</div>'));

	var chartareaid = "traffic-charts-area"

	//添加军事频道页面pv 和广告位pv 数据监控
	$('#'+chartareaid).append($('<div class="col-lg-4" >' +
	       '<div id="mil-pv-ad"  style="height:300px;"></div>' +
	   '</div>'))
	$('#'+chartareaid).append($('<div class="col-lg-4" >' +
	       '<div id="mimiclib-timeouts-chart"  style="height:300px;"></div>' +
	   '</div>'))
	$('#'+chartareaid).append($('<div class="col-lg-4" >' +
	       '<div id="mimicreq-timeouts-chart"  style="height:300px;"></div>' +
	   '</div>'))
	//初始化时间控件
    function cbqps(start, end) {
         $('#traffic-date-picker' + ' span').html(start.format('YYYY-MM-DD HH:mm') + ' - ' + end.format('YYYY-MM-DD HH:mm'));
    }

    var miltrafficchart = createChart("mil-pv-ad", "军事频道页面pv和广告pv数据", "你好", "new");
    var mimic_libchart = createChart("mimiclib-timeouts-chart", "广告代码加载超时数据", "你好", "new");
    var mimic_reqchart = createChart("mimicreq-timeouts-chart", "广告代码加载超时数据", "你好", "new");

    var start = moment().startOf("day");
    var end = moment();
    $('#traffic-date-picker').daterangepicker(
       {
         ranges: {
           '过去15m': [moment().subtract(15, "m"), moment()],
           '过去1h': [moment().subtract(1, 'h'), moment()],
           '过去2h': [moment().subtract(2, 'h'), moment()],
           '过去3h': [moment().subtract(3, 'h'), moment()],
           '过去4h': [moment().subtract(4, 'h'), moment()],
           '过去6h': [moment().subtract(6, 'h'), moment()],
           '今天': [moment().startOf("day"), moment()],
           '过去1天': [moment().subtract(1, 'days'), moment()],
           '过去2天': [moment().subtract(2, 'days'), moment()],
           '过去3天': [moment().subtract(3, 'days'), moment()],
           '过去4天': [moment().subtract(4, 'days'), moment()]
         },
         startDate: start,
         endDate: end,
         timePicker: true
       }, cbqps);

    $('#traffic-date-picker').on('apply.daterangepicker', function(ev, picker) {
    	var start = picker.startDate.valueOf()
        var end = picker.endDate.valueOf()

        $.ajax({
	          url: "/traffic/wap/mil",
	          dataType: "json",
	          data: {
	              inter: "1m",
	              start: start,
	              end: end,
	          },
	          timeout: 20000,
	      })
	      .done(function(json){
	          console.log(json);
	          for (var i = miltrafficchart.series.length -1; i >= 0; i --){
	            miltrafficchart.series[i].remove();
	          }
	          miltrafficchart.addSeries(json[0]);
	          miltrafficchart.addSeries(json[1]);
	          console.log(miltrafficchart.options);
	      });

        $.ajax({
	          url: "/traffic/wap/mimic_lib",
	          dataType: "json",
	          data: {
	              inter: "1m",
	              start: start,
	              end: end,
	          },
	          timeout: 20000,
	      })
	      .done(function(json){
	          console.log(json);
	          for (var i = mimic_libchart.series.length -1; i >= 0; i --){
	            mimic_libchart.series[i].remove();
	          }
	          mimic_libchart.addSeries(json[0]);
	          mimic_libchart.addSeries(json[1]);
	          console.log(mimic_libchart.options);
	      });

	      $.ajax({
	          url: "/traffic/wap/mimic_req",
	          dataType: "json",
	          data: {
	              inter: "1m",
	              start: start,
	              end: end,
	          },
	          timeout: 20000,
	      })
	      .done(function(json){
	          console.log(json);
	          for (var i = mimic_reqchart.series.length -1; i >= 0; i --){
	            mimic_reqchart.series[i].remove();
	          }
	          mimic_reqchart.addSeries(json[0]);
	          mimic_reqchart.addSeries(json[1]);
	          console.log(mimic_reqchart.options);
	      });

    });

    $('#traffic-date-picker').trigger('apply.daterangepicker', $('#traffic-date-picker').data('daterangepicker'));

});